<!--
wy 购物车页面
描述：显示购物车
最后修改时间：9.16/16:19
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吃游网-购物车</title>

    <link rel="stylesheet" href="css/quote/bootstrap.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/home/home.css">
    <link rel="stylesheet" href="css/shopcart.css">

    <script src="js/quote/jquery-3.4.1.js"></script>
    <script src="js/quote/hf.js"></script>
    <script src="js/quote/jquery.js"></script>
    <script src="js/quote/bootstrap.js"></script>
    <script src="js/custom.js"></script>
</head>
<body>
<div class="page-content background body">

    <div class="container">
        <div class="">
            <h3 style="margin: 22px 0">购物车</h3>
        </div>
    </div>

    <div class="cart-warp background">
        <div class="w">
            <div id="jd-cart" style="margin-left: -75px;margin-right:  -55px">
                <div class="cart-main cart-main-new">
                    <div class="cart-thead">
                        <div class="column t-checkbox" style="margin-left: 10px">
                            <!--<div class="cart-checkbox">
                                <input type="checkbox" name="toggle-checkboxes" class="jdcheckbox"
                                       clstag="clickcart|keycount|xincart|cart_allCheck">
                                <label for="">勾选全部商品</label>
                            </div>-->
                            美食图片
                        </div>
                        <div class="column t-goods">商品</div>
                        <div class="column t-props">商家</div>
                        <div class="column t-price" style="margin-left: 10px">单价</div>
                        <div class="column t-quantity" style="margin-left: 10px">数量</div>
                        <div class="column t-sum" style="margin-left: -20px">小计</div>
                        <div class="column t-action" style="margin-left: 30px">操作</div>
                    </div>
                    <div id="cart-list"><input type="hidden" id="allSkuIds" value="312606,188549">
                        <!-- 需要引用的全局信息 -->
                        <div class="cart-item-list" id="cart-item-list-01">
                            <div class="cart-tbody" id="vender_8888">

                                <div class="item-list">

                                    <div class="item-give item-full " id="product_promo_50036182740"
                                         style="min-height: 106px">
                                        <!--模拟示例-->
                                        <!-- <div class="  item-last  item-item " >
                                             <div class="item-form">
                                                 <div class="cell p-checkbox">
                                                     <div class="cart-checkbox">
                                                         <input type="checkbox" name="checkItem" class="jdcheckbox">
                                                     </div>
                                                 </div>
                                                 <div class="cell p-goods">
                                                     <div class="goods-item">
                                                         <div class="p-img">
                                                             <a href="#" target="_blank"
                                                                class="J_zyyhq_312606"><img src="//img10.360buyimg.com/cms/s80x80_jfs/t1/38981/1/10751/327589/5d1dc079E032949dc/21218e204c32529a.jpg"></a>
                                                         </div>
                                                         <div class="item-msg">
                                                             <div class="p-name">
                                                                 <a href="//item.jd.com/312606.html" target="_blank">
                                                                     云南白药 牙膏 180g （留兰香型）新老包装随机发货
                                                                 </a>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="cell p-props p-props-new">
                                                     <div class="props-txt">留兰香型牙膏 180g</div>
                                                 </div>
                                                 <div class="cell p-price p-price-new">
                                                     <p class="plus-switch">
                                                         <strong>¥28.30</strong>
                                                     </p>
                                                 </div>
                                                 <div class="cell p-quantity">
                                                     <div class="quantity-form">
                                                         <a href="#" class="decrement disabled">-</a>
                                                         <input autocomplete="off" type="text" class="itxt" value="1" minnum="1">
                                                         <a href="#" class="increment">+</a>
                                                     </div>
                                                 </div>
                                                 <div class="cell p-sum">
                                                     <strong>¥32.90</strong>
                                                     <span class="weight"></span>
                                                 </div>
                                                 <div class="cell p-ops">
                                                     <a href="#"  id="remove">删除</a>
                                                     <a href="#" class="cart-follow">移到我的收藏</a>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="item-single  item-item " product="1" id="product_188549" num="1"
                                              jdbx=""
                                              skuid="188549" venderid="8888" zy="true" flashpurchase="false"
                                              oversea="false"
                                              sid="16831" cid="16840" cm="" plus95discount="false"
                                              paralleldiscount="0.00"
                                              balanceamount="" ts="1563546090258" cancelplus="false" dt="10"
                                              shopid="1000225581">
                                             <div class="item-form">
                                                 <div class="cell p-checkbox">
                                                     <div class="cart-checkbox">
                                                         &lt;!&ndash;单品&ndash;&gt;
                                                         <input p-type="188549_1" type="checkbox" name="checkItem"
                                                                value="188549_1" data-bind="cbid" class="jdcheckbox"
                                                                clstag="clickcart|keycount|xincart|cart_checkOn_sku">
                                                         <label for="">勾选商品</label>
                                                     </div>
                                                 </div>
                                                 <div class="cell p-goods">
                                                     <div class="goods-item">
                                                         <div class="p-img">
                                                             <a href="//item.jd.com/188549.html" target="_blank"
                                                                class="J_zyyhq_188549" good-similar="188549"><img
                                                                     alt="曼秀雷敦男士冰爽活炭洗面奶150ml （控油清爽洁面乳 去黑头去油去角质 油性皮肤适用 洁净不紧绷）"
                                                                     clstag="clickcart|keycount|xincart|cart_sku_pic"
                                                                     src="//img10.360buyimg.com/cms/s80x80_jfs/t1/49339/34/9517/182971/5d6f2136E2f62115e/c7d8f4d46c2901d0.jpg"></a>
                                                             <div class="cart-similar" name="cs_188549">
                                                                 <div class="cs-tit">找相似<b></b></div>
                                                                 <div class="cs-cont">
                                                                     <div class="cs-empty"></div>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                         <div class="item-msg">
                                                             <div class="p-name">
                                                                 <a clstag="clickcart|keycount|xincart|cart_sku_name"
                                                                    href="//item.jd.com/188549.html" target="_blank">
                                                                     曼秀雷敦男士冰爽活炭洗面奶150ml （控油清爽洁面乳 去黑头去油去角质 油性皮肤适用 洁净不紧绷）
                                                                 </a>
                                                             </div>

                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="cell p-props p-props-new">
                                                     <div class="props-txt" title="洁面乳150ml（冰爽活炭）">洁面乳150ml（冰爽活炭）</div>
                                                     <div class="props-txt" title="150ml"
                                                          t="${product.mainSku.sizeDesc}">
                                                         150ml
                                                     </div>
                                                 </div>
                                                 <div class="cell p-price p-price-new
                                                                                                 ">
                                                     <p class="plus-switch">
                                                         <strong>¥32.90</strong>
                                                     </p>
                                                     <div>
                                                         <div class="clr"></div>
                                                     </div>
                                                     <p class="mt5" jj="">
                                                     </p>
                                                     <p class="mt5" bt=""></p>
                                                 </div>
                                                 <div class="cell p-quantity">
                                                     &lt;!&ndash;单品&ndash;&gt;
                                                     <div class="quantity-form">
                                                         <a href="javascript:void(0);"
                                                            clstag="clickcart|keycount|xincart|cart_num_down"
                                                            class="decrement disabled"
                                                            id="decrement_8888_188549_1_1">-</a>
                                                         <input autocomplete="off" type="text" class="itxt" value="1"
                                                                id="changeQuantity_8888_188549_1_1_0" minnum="1">
                                                         <a href="javascript:void(0);"
                                                            clstag="clickcart|keycount|xincart|cart_num_up"
                                                            class="increment"
                                                            id="increment_8888_188549_1_1_0">+</a>
                                                     </div>

                                                 </div>
                                                 <div class="cell p-sum">
                                                     <strong>¥32.90</strong>
                                                     <span class="weight" id="weight_188549" data="0.2" fresh=""
                                                           skuid="188549" num="1" afterprice="32.90" virnofreight="false"
                                                           category="1316;16831;16840"></span>
                                                 </div>
                                                 <div class="cell p-ops">
                                                     &lt;!&ndash;单品&ndash;&gt;
                                                     <a id="remove_8888_188549_1"
                                                        clstag="clickcart|keycount|xincart|cart_sku_del"
                                                        data-name="曼秀雷敦男士冰爽活炭洗面奶150ml （控油清..."
                                                        data-more="removed_32.90_1"
                                                        class="cart-remove" href="javascript:void(0);" ob="false">删除</a>
                                                     <a href="javascript:void(0);" class="cart-follow"
                                                        id="follow_8888_188549_1"
                                                        clstag="clickcart|keycount|xincart|cart_sku_guanzhu" ob="false">移到我的关注</a>
                                                 </div>
                                             </div>
                                             <div class="item-extra mb10">
                                                 &lt;!&ndash; 落地配服务 &ndash;&gt;
                                             </div>
                                         </div>-->
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="isSsgdg" value=""></div>
                    </div>
                </div>

                <div id="cart-floatbar">
                    <div class="ui-ceilinglamp-1" style="width: 990px; height: 52px;">
                        <div class="cart-toolbar" style="width: 1120px; height: 50px;">
                            <div class="toolbar-wrap">
                                <div class="selected-item-list  hide" style="display: block;">
                                </div>
                                <div class="options-box" style="left: -60px">
                                    <div class="select-all" style="margin-left: 10px">
                                        <div class="cart-checkbox">
                                            <input type="checkbox" id="toggle-checkboxes_down" class="jdcheckbox"
                                                   onclick="allCheck()">
                                        </div>
                                        全选
                                    </div>
                                    <div class="operation">
                                        <a href="javascript:void(0)" class="remove-batch" onclick="deleteCheck()">删除选中商品</a>
                                    </div>
                                    <div class="clr"></div>
                                    <div class="toolbar-right toolbar-right-new">
                                        <div class="normal">
                                            <div class="comm-right">
                                                <div class="btn-area">
                                                    <a href="javascript:void(0);" onclick="addorder()"
                                                       class="submit-btn"
                                                       data-bind="4">
                                                        添加订单</a>
                                                </div>
                                                <div class="price-sum">
                                                    <div>
                                                        <span class="txt txt-new">总价：</span>
                                                        <span class="price sumPrice" id="sumprice">
									                    	<em id="totalmoney">0.00</em>
									                    </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
    </div>
</div>
</body>
<!--页面加载时获取当前的用户并展示购物车-->
<script>
    //var commId = new Array();
    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;
            //展示用户的购物车
            $.ajax({
                url: "/shoppingcart/showcommodity",
                dataType: "json",
                data: "userId=" + user,
                success: function (data) {
                    //var total = 0.00;
                    /*展示购物车商品*/
                    if (data.length == 0) {
                        $('.item-give').append(`
                            <h3 style="text-align: center;margin-top: 75px">购物车中还没有商品，你可以 <a href="home.html" style=" color: #e14561">【点我去主页】</a></h3>
                        `)
                    }
                    $.each(data, function (i, dom) {
                        //commId[i] = dom.commodityId;
                        //total = total + parseFloat((dom.commodityPrice * dom.commodityNum).toFixed(2));
                        $('.item-give').append(`
                            <div class="  item-last  item-item " name="parent" >
                                <div class="item-form">
                                    <div class="cell p-checkbox" style="margin:0 15px">
                                        <div class="cart-checkbox">
                                            <input type="checkbox" name="checkItem" class="jdcheckbox subcheckbox" onclick="check()">
                                            <input type="hidden" value="${dom.commodityId}">
                                        </div>
                                    </div>
                                    <div class="cell p-goods">
                                        <div class="goods-item">
                                            <div class="p-img" style="margin-left: -20px">
                                                <a href="/commodity.html?commodityId=${dom.commodityId}"
                                                   class="J_zyyhq_312606"><img src="${dom.commodityPictures[0].picture}" width="80px" height="80px"></a>
                                            </div>
                                            <div class="item-msg">
                                                <div class="p-name" style="padding-left: 20px">
                                                    <a href="/commodity.html?commodityId=${dom.commodityId}">
                                                        ${dom.commodityName}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell p-props p-props-new">
                                         <div class="p-name" style="margin-left: -10px">
                                              <a href="/storeInfo.html?storeId=${dom.storeId}">
                                                        ${dom.storeName}
                                              </a>
                                         </div>
                                    </div>
                                    <div class="cell p-price p-price-new">
                                        <p class="plus-switch">
                                            <strong>${dom.commodityPrice}</strong>
                                        </p>
                                    </div>
                                    <div class="cell p-quantity" id="number">
                                        <div class="quantity-form" style="text-align: center" id="number2">
                                            <a href="javascript:void(0);"class="decrement" onclick="change(this,-1,'${dom.commodityId}')">-</a>
                                            <strong class="itxt" style="margin-left: 2px" id="num">${dom.commodityNum}</strong>
                                            <a href="javascript:void(0);"class="increment" onclick="change(this,1,'${dom.commodityId}')">+</a>
                                        </div>
                                    </div>
                                    <div class="cell p-sum" id="subprice">
                                        <strong class="subtotal" name="count" id="subs">${(dom.commodityPrice * dom.commodityNum).toFixed(2)}</strong>
                                        <span class="weight"></span>
                                    </div>
                                    <div class="cell p-ops">
                                        <a href="#"  id="remove" onclick="cancle('${dom.commodityId}')">删除</a>
                                        <a href="#" class="cart-follow" onclick="addcoll('${dom.commodityId}')">添加到收藏</a>
                                    </div>
                                </div>
                            </div>
                        `)
                    });
                    /*展示总金额*/
                    //$('.sumPrice').html("");
                    //$('.sumPrice').append(`<em id="total">¥` + total.toFixed(2) + `</em>`);
                }
            })
        }
    });
</script>
<!--全选-->
<script>
    function allCheck() {
        var checkBox = document.getElementsByName('checkItem');
        //设置一个标志，如果有一个复选框没有选择，那么就设为true
        var checkedFlag = false;
        for (i = 0; i < checkBox.length; i++) {
            if (checkBox[i].checked == false) {
                checkedFlag = true;
                break;
            }
        }
        if (checkedFlag) {
            for (i = 0; i < checkBox.length; i++) {
                checkBox[i].checked = true;
            }
        } else {
            for (i = 0; i < checkBox.length; i++) {
                checkBox[i].checked = false;
            }
        }
        total();
    }
</script>
<!--单个选择-->
<script>
    function check() {
        var allCheckBox = document.getElementById('toggle-checkboxes_down')
        var checkBox = document.getElementsByName('checkItem');
        var flag = true;
        for (var i = 0; i < checkBox.length; i++) {
            if (checkBox[i].checked == false) {
                flag = false;
            }
        }
        if (flag) {
            allCheckBox.checked = true;
        } else {
            allCheckBox.checked = false;
        }
        total();
    }
</script>
<!--修改商品数量-->
<script>
    function change(btn, n, commId) {
        var numTag = btn.parentNode.getElementsByTagName("strong");
        var num = parseInt(numTag[0].innerHTML);
        if (num <= 1 && n < 0) {
            return;
        }
        var commNum = num + n;
        //修改数据库中商品数量
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;
                $.ajax({
                    url: "/shoppingcart/updatecommnum",
                    dataType: "json",
                    data: "userId=" + user + "&commodityId=" + commId + "&num=" + commNum,
                })
            }
        });
        numTag[0].innerHTML = commNum;
        //获取当前价格
        var price = btn.parentNode.parentNode.parentNode.children[3].children[0].getElementsByTagName("strong")[0].innerHTML;
        //获取小计
        var subtotal = btn.parentNode.parentNode.parentNode.children[5].getElementsByClassName("subtotal")[0];
        //计算价格
        subtotal.innerHTML = ((num + n) * parseFloat(price)).toFixed(2);
        total();
    }
</script>
<!--删除购物车商品-->
<script>
    function cancle(commodityId) {
        var ok = window.confirm("确定要删除吗")
        if (ok) {
            $.get("user/finduser", {}, function (data) {
                if (data.length > 0) {
                    var user = data;
                    $.ajax({
                        url: "/shoppingcart/deletecommcdity",
                        dataType: "json",
                        data: "userId=" + user + "&commodityId=" + commodityId,
                        success: function (data) {
                            //先清空在重新加载
                            $('.item-give').html("");
                            alert(data.message)
                            //commId.splice(0, commId.length)
                            $.get("user/finduser", {}, function (data) {
                                if (data.length > 0) {
                                    var user = data;
                                    //展示用户的购物车
                                    $.ajax({
                                        url: "/shoppingcart/showcommodity",
                                        dataType: "json",
                                        data: "userId=" + user,
                                        success: function (data) {
                                            //var total = 0.00;
                                            /*展示购物车商品*/
                                            if (data.length == 0) {
                                                $('.item-give').append(`
                            <h3 style="text-align: center;margin-top: 75px">购物车中还没有商品，你可以 <a href="home.html" style=" color: #e14561">【点我去主页】</a></h3>
                        `)
                                            }
                                            $.each(data, function (i, dom) {
                                                //commId[i] = dom.commodityId;
                                                //total = total + parseFloat((dom.commodityPrice * dom.commodityNum).toFixed(2));
                                                $('.item-give').append(`
                            <div class="  item-last  item-item " name="parent" >
                                <div class="item-form">
                                    <div class="cell p-checkbox" style="margin:0 15px">
                                        <div class="cart-checkbox">
                                            <input type="checkbox" name="checkItem" class="jdcheckbox subcheckbox" onclick="check()">
                                            <input type="hidden" value="${dom.commodityId}">
                                        </div>
                                    </div>
                                    <div class="cell p-goods">
                                        <div class="goods-item">
                                            <div class="p-img" style="margin-left: -20px">
                                                <a href="/commodity.html?commodityId=${dom.commodityId}"
                                                   class="J_zyyhq_312606"><img src="${dom.commodityPictures[0].picture}" width="80px" height="80px"></a>
                                            </div>
                                            <div class="item-msg">
                                                <div class="p-name" style="padding-left: 20px">
                                                    <a href="/commodity.html?commodityId=${dom.commodityId}">
                                                        ${dom.commodityName}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell p-props p-props-new">
                                         <div class="p-name" style="margin-left: -10px">
                                              <a href="/storeInfo.html?storeId=${dom.storeId}">
                                                        ${dom.storeName}
                                              </a>
                                         </div>
                                    </div>
                                    <div class="cell p-price p-price-new">
                                        <p class="plus-switch">
                                            <strong>${dom.commodityPrice}</strong>
                                        </p>
                                    </div>
                                    <div class="cell p-quantity" id="number">
                                        <div class="quantity-form" style="text-align: center" id="number2">
                                            <a href="javascript:void(0);"class="decrement" onclick="change(this,-1,'${dom.commodityId}')">-</a>
                                            <strong class="itxt" style="margin-left: 2px" id="num">${dom.commodityNum}</strong>
                                            <a href="javascript:void(0);"class="increment" onclick="change(this,1,'${dom.commodityId}')">+</a>
                                        </div>
                                    </div>
                                    <div class="cell p-sum" id="subprice">
                                        <strong class="subtotal" name="count" id="subs">${(dom.commodityPrice * dom.commodityNum).toFixed(2)}</strong>
                                        <span class="weight"></span>
                                    </div>
                                    <div class="cell p-ops">
                                        <a href="#"  id="remove" onclick="cancle('${dom.commodityId}')">删除</a>
                                        <a href="#" class="cart-follow" onclick="addcoll('${dom.commodityId}')">添加到收藏</a>
                                    </div>
                                </div>
                            </div>
                        `)
                                            });
                                            /*展示总金额*/
                                            //$('.sumPrice').html("");
                                            //$('.sumPrice').append(`<em id="total">¥` + total.toFixed(2) + `</em>`);
                                        }
                                    })
                                }
                            });
                        }
                    })
                }
            });
        }
    }
</script>
<!--添加到收藏-->
<script>
    function addcoll(commodityId) {
        var ok = window.confirm("确定要添加该商品到收藏吗")
        if (ok) {
            $.get("user/finduser", {}, function (data) {
                if (data.length > 0) {
                    var user = data;
                    $.ajax({
                        url: "/shoppingcart/addtocoll",
                        dataType: "json",
                        data: "userId=" + user + "&commodityId=" + commodityId,
                        success: function (data) {
                            alert(data.message)
                        }
                    })
                }
            });
        }
    }
</script>
<!--添加到订单-->
<script>
    function addorder() {
        if ($("#totalmoney").text() == '¥0.00') {
            alert("您还没有选择商品！")
        } else {
            var ok = window.confirm("确定要添加订单吗")
            if (ok) {
                var commodityIds = new Array();
                var commodityNums = new Array();

                $(".subcheckbox").each(function () {
                    if ($(this).prop("checked")) {
                        var commId = $(this).next().val();
                        commodityIds.push(commId);
                        var commNum = $(this).parent().parent().parent().children("#number").children("#number2").children("#num").text();
                        commodityNums.push(commNum);
                    }
                })

                $.get("user/finduser", {}, function (data) {
                    if (data.length > 0) {
                        var user = data;
                        $.ajax({
                            url: "/shoppingcart/addorder",
                            dataType: "json",
                            data: "userId=" + user + '&commodityIds=' + commodityIds + '&commodityNums=' + commodityNums,
                            success: function (data) {
                                alert(data.message)
                            }
                        })

                        for (var i = 0; i < commodityIds.length; i++) {
                            $.ajax({
                                url: "/shoppingcart/deletecommcdity",
                                dataType: "json",
                                data: "userId=" + user + "&commodityId=" + commodityIds[i],
                            })
                        }
                        window.location.href = "ordermessage.html"
                    }
                });
            }
        }
    }
</script>
<!--计算总金额-->
<script>
    function total() {
        var allprice = 0.00;
        $(".subcheckbox").each(function () {
            if ($(this).prop("checked")) {
                var price = $(this).parent().parent().parent().children("#subprice").children("#subs").text();
                allprice = allprice + parseFloat(price);
            }
        })
        $('#totalmoney').html(allprice.toFixed(2));
    }
</script>
<!--删除选中商品-->
<script>
    function deleteCheck() {
        var commodityIds = new Array();
        $(".subcheckbox").each(function () {
            if ($(this).prop("checked")) {
                var commId = $(this).next().val();
                commodityIds.push(commId);
            }
        })
        if (commodityIds.length == 0) {
            alert("您还没有选择商品！")
        } else {
            var ok = window.confirm("确定要删除选中的商品吗？")
            if (ok) {
                $.get("user/finduser", {}, function (data) {
                    if (data.length > 0) {
                        var user = data;
                        for (var i = 0; i < commodityIds.length; i++) {
                            $.ajax({
                                url: "/shoppingcart/deletecommcdity",
                                dataType: "json",
                                data: "userId=" + user + "&commodityId=" + commodityIds[i],
                            })
                        }
                    }
                });
                location.reload();
            }
        }
    }
</script>
</html>